import React, { useState } from "react";
import { Button, Modal, Space } from "antd";
import {
  CloseOutlined,
  InfoCircleOutlined,
  PrinterOutlined,
  ShareAltOutlined,
  DownloadOutlined,
  EditOutlined,
} from "@ant-design/icons";
import { FileDownload, FileRename } from "@/components/file";
import unknown from "@/assets/file-icons/unknown.png";
import "@/styles/file/preview.scss";
import { getFileInfo } from "@/api/file";
import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types";

const DetailsCompoent = ({ file, onCallback }) => {
  return (
    <div className="details-container">
      <div className="header-card">
        <FileRename type="text" icon={<EditOutlined />} file={file} onCallback={onCallback} />
        <FileDownload type="text" icon={<DownloadOutlined />} path={file.fullPath} />
        <Button type="text" icon={<PrinterOutlined />} />
        <Button type="text" icon={<ShareAltOutlined />} />
      </div>
      <div className="content-card"></div>
    </div>
  );
};
DetailsCompoent.propTypes = {
  file: PropTypes.object.isRequired,
  onCallback: PropTypes.func,
};

const FileUnknownPreview = ({ file, onCallback }) => {
  return (
    <div className="content-card">
      <img className="icon" src={unknown} alt="" />
      <div className="fileName">{file.fileName}</div>
      <div className="tip">暂不支持在线预览，我们会持续优化，敬请期待</div>
      <Space>
        <FileRename type="primary" title="重命名" file={file} onCallback={onCallback} />
        <FileDownload type="primary" title="下载" icon={<DownloadOutlined />} path={file.fullPath} />
      </Space>
      <div style={{ width: "100%", height: "100px", backgroundColor: "transparent" }}></div>
    </div>
  );
};
FileUnknownPreview.propTypes = {
  file: PropTypes.object.isRequired,
  onCallback: PropTypes.func,
};

// 事件委托
const FilePreviewComponent = ({ items, dataProp, children, onCallback }) => {
  const [foled, setFoled] = useState(false);
  const [file, setFile] = useState({});
  const [fileIndex, setFileIndex] = useState(0);
  const navigate = useNavigate();

  const handleClick = async (path, index) => {
    const res = await getFileInfo(path);
    setFile(res);
    setFileIndex(index);
  };

  const onClick = (e) => {
    const findNode = e.target.closest(`[${dataProp}]`);
    if (findNode) {
      const index = findNode.getAttribute(dataProp);
      if (index) {
        const { isDirectory, fullPath } = items[index];
        isDirectory ? navigate(fullPath.substring(1)) : handleClick(fullPath, index);
      }
    }
  };

  const handleCallback = (res) => {
    setFile(res);
    onCallback && onCallback(res, fileIndex);
  };

  return (
    <>
      {children && React.cloneElement(children, { onClick })}

      <Modal
        wrapClassName="file-preview-modal"
        width=""
        footer={null}
        maskClosable={false}
        closable={false}
        keyboard={false}
        open={file.fileName}
        onCancel={() => setFile({})}
        destroyOnClose
      >
        <div className={`file-preview-wrapper${foled ? " file-preview-wrapper-foled" : ""}`}>
          <div className="container">
            <div className="header-card">
              <Button type="text" icon={<CloseOutlined />} onClick={() => setFile({})} />
              <div className="title">{file.fileName}</div>
              <Button
                className="info-action"
                type="text"
                icon={<InfoCircleOutlined />}
                onClick={() => setFoled(!foled)}
              />
            </div>
            <FileUnknownPreview file={file} onCallback={handleCallback} />
          </div>
          <DetailsCompoent file={file} />
        </div>
      </Modal>
    </>
  );
};
FilePreviewComponent.propTypes = {
  items: PropTypes.array.isRequired,
  dataProp: PropTypes.string,
  children: PropTypes.node,
  onCallback: PropTypes.func,
};

export default FilePreviewComponent;
